<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				height:350px;
				width:400px;
				margin:0 auto;
				overflow: hidden;
			}
			ul li{
				float: left;
				height:50px;
				line-height: 50px;
				padding:0 15px;
				background-color: #00CED1;
				list-style: none;
				margin-right:10px;
			}
			#box div{
				clear:both;
				height:300px;
				width:400px;
				background-color: #00CED1;
				text-align: center;
				line-height:300px;
				display: none;
			}
			#box .active{
				background-color: #FF0000;
			}
			#box .show{
				background-color: #FF0000;
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="active">音乐</li>
				<li>电视</li>
				<li>画图</li>
			</ul>
			<div class="show">音乐内容</div>
			<div>电视内容</div>
			<div>画图内容</div>
		</div>
		<script>
			//1.找到所有的li，绑定点击事件
		   var lis=document.getElementsByTagName("li");//集合
		   //查找页面上三个div
		   var box=document.getElementById("box");//找到box
		   var divs=box.getElementsByTagName("div");//再box下面的div-->三个
		   
		   //2. 通过循环给每个 li 绑定一个点击事件
		   for(var i=0;i<lis.length;i++){//i=0
		       //先在每个li对象身上，添加一个属性(index--->i)
			   lis[i].index=i;
			   
			   lis[i].onclick=function(){//当前触发事件的元素
			       //console.log(this);
				   // console.dir(this);
				   //先把所有元素的class ,都给删除
				   for(var n=0;n<lis.length;n++){
					   lis[n].className="";
					   divs[n].className="";
				   }
				   var newi=this.index;//0,1,2
				   //点击谁，就给那个li 添加一个class="active"
				   lis[newi].className="active";
				   divs[newi].className="show";
				   
			   }
		   }
		   
		</script>
	</body>
</html>
